<template>
  <div class="hd-left">
    <div class="pic"><img src="../assets/one.png" alt=""></div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      text-color="#000"
      active-text-color="#fff"
    >
      <el-menu-item index="1" >
        <router-link  to="/homePage">首页</router-link>
        </el-menu-item>
      <el-menu-item index="2" >
        <router-link  to="/Economics">房产经济</router-link>
        </el-menu-item>
      <el-menu-item index="3">
        <router-link  to="/Classification">地产分类</router-link>
        </el-menu-item>
      <el-menu-item index="4"> 
        <router-link to="/About">关于我们</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
        this.activeIndex=key
        console.log(this.activeIndex);
      }
  },
};
</script>

<style lang="less">
.hd-left{
  display: flex;
  a {
  text-decoration: none;
  display:block; 
  color: #000;
  padding: 0 15px;
  &:hover{
    background-color: #3671f1;
    
  }
}

}
.active{
  background-color: #3671f1;
}

</style>